
<template>

  <el-space v-if="editorMode=='tree'" direction="horizontal">
    <el-text>
      Select attributes:
    </el-text>
    <el-select
        v-model="selects"
        multiple
        placeholder="Select"
    >
      <el-option
          v-for="item in attributes"
          :key="item"
          :label="item"
          :value="item"
          :disabled="item == 'html_url'"
      />
    </el-select>
  </el-space>

  <el-space direction="vertical" style="float: right;" alignment="flex-end">
    <el-space direction="horizontal">
      <el-button type="primary" @click="editUrlDialog = true">Get API data</el-button>
      <el-button type="primary" @click="allDataDialog = true">Show all Data</el-button>
    </el-space>
  </el-space>

  <el-dialog v-model="editUrlDialog" style="padding-bottom: 50px">
    <el-input v-model="input" type="textarea" rows="15"></el-input>
    <br>
    <br>
    <el-button type="primary" @click="processInput" style="float: right">Confirm</el-button>
  </el-dialog>

  <br>
  <br>

  <vue-jsoneditor
      v-model="data"
      mode="tree"
      height="90%"
      width="100%"
      ref="editor"
      @change-mode = "editorMode = $event"
      @change = "dataChange"
  />

  <el-dialog v-model="allDataDialog">
    <JsonEdit v-model:data="allData"/>
  </el-dialog>
</template>

<script setup lang="ts">

import {onMounted, type Ref, ref, watch} from "vue";
import JsonEdit from "@/components/JsonEdit.vue";
import defaultAttribute from "../data/attribute.json"
import {Octokit} from "octokit";
import allData from "../data/all.json"
import VueJsoneditor from "vue3-ts-jsoneditor";

let input = ref("")
let editUrlDialog = ref(false)
let selects:Ref<string[]> = ref([])
let attributes = ref(defaultAttribute)
let editorMode = ref("tree")
let contentData:Ref<any[]> = ref([])
let allDataDialog = ref(false)
let allDataMap = new Map()
let editor:Ref<any> = ref()

const data: Ref<any[] | undefined> = defineModel()

onMounted(()=>{
  setInput()
  if (data.value && data.value?.length>0){
    for (let key in data.value[0]){
      selects.value.push(key)
    }
  }
})

watch(data, ()=>{
  setInput()
})

async function processInput(){
  setInput()
  let contentArray = input.value.split("\n\n")
  console.log("contentArray",contentArray)
  contentData.value = await fetchUrls(setGithubApiUrl(contentArray))
  downloadJson(contentData.value)
}
function setInput() {
  if (data.value){
    for (let dataItem of data.value){
      input.value += dataItem.html_url + "\n\n"
    }
  }
}
function setGithubApiUrl(contentArrayArg:string[]) {
  let newArray = []
  for (let key in contentArrayArg){
    newArray.push(contentArrayArg[key].replace("github.com","api.github.com/repos"))
  }
  return newArray
}

async function fetchUrls(contentArrayArg:string[]) {
  console.log("fetchUrls",contentArrayArg)
  const octokit = new Octokit({
    auth: 'github_pat_11ADG3QNA0rHTd5MfDcJFp_X6upNceAGuLRWebAuHCCbHcB4FCTMD2ejTzeMqU',
  });
  let responses = []
  for (let contentUrl of contentArrayArg){
    //const response = await axios.get(contentUrl)
    try {
      const response = await octokit.request("GET "+contentUrl);
      console.log("response",response)
      responses.push(response.data)
    }catch (e){
      console.log(e)
    }
    console.log("responses",responses)
  }
  return responses
}
function downloadJson(content:any){
  let eleLink = document.createElement("a");
  eleLink.download = 'all.json';
  eleLink.style.display = "none";
  let data = JSON.stringify(content, undefined, 4);
  let blob = new Blob([data], { type: "text/json" });
  eleLink.href = URL.createObjectURL(blob);
  document.body.appendChild(eleLink);
  eleLink.click();
  document.body.removeChild(eleLink);
}

for (let allDataItem of allData){
  allDataMap.set(allDataItem.html_url, allDataItem)
}

watch(selects, ()=>{
  getSelectAttribute()
  console.log("selects",selects.value)
  editor.value.$expandAll()
})

function getSelectAttribute() {
  if(data.value){
    for (let dataItem of data.value){
      for (let selectItem of selects.value){
        if(allDataMap.has(dataItem.html_url) && selectItem in allDataMap.get(dataItem.html_url)){
          dataItem[selectItem]=allDataMap.get(dataItem.html_url)[selectItem]
          console.log("dataItem",dataItem)
        }
      }
      for (let key in dataItem){
        if (!selects.value.includes(key)){
          delete dataItem[key]
          console.log("dataItem",dataItem)
        }
      }
    }
  }
}

function dataChange() {
  data.value = editor.value.$get().json
  console.log("data change",data.value)
}


</script>


<style scoped>

</style>
